<template>
    <el-row :gutter="20">
      <el-col :span="17"> 
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="班级名称" style="font-weight: 800;" prop="classId">
          <el-select v-model="queryParams.classId" placeholder="请选择班级名称" style="width: 240px;font-weight: 400;">
          <el-option
            v-for="item in Classcities"
            :key="item.classId"
            :label="item.className"
            :value="item.classId"
           >
          </el-option>
        </el-select>
        </el-form-item>
    
       <el-form-item label="开考时间" style="font-weight: 800;" prop="beginTime">
        <el-date-picker
        v-model="queryParams.beginTime"
        type="datetime"
        placeholder="请选择开考时间"
        />
       </el-form-item>

       <el-form-item label="考试名称" style="font-weight: 800;" prop="name">
        <el-input v-model="queryParams.name" style="width: 240px" placeholder="请输入要查询的考试名称" />
        </el-form-item>
       <el-form-item>
          <el-button type="primary" icon="Search" @click="findStudentInfo" style="width: 73px; height: 28px; font-size: 10px;">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery(queryRef)" style="width: 73px; height: 28px; font-size: 10px;" type="info" plain>重置</el-button>
          <el-button
                 style="width: 73px; height: 28px; font-size: 10px;"
                 type="warning"
                 plain
                 icon="Download"
                 @click="handleExport"
                 v-hasPermi="['system:user:export']"
                  >导出</el-button>
        </el-form-item>
    </el-form>
  </el-col> 
    <el-tooltip  class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
             v-if="search">
             <el-button circle icon="Search" @click="toggleSearch()" />
           </el-tooltip>
           <el-tooltip class="item" effect="dark" content="刷新" placement="top">
           <el-button circle icon="Refresh" @click="refresh()"/>
    </el-tooltip>
</el-row>
 <!-- 列表查询 -->
 <el-table v-loading="loading" :data="importList" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#eee', color: '#909399' }">
            <template #empty v-if="importList.length == 0">
              <el-empty description="暂时还没有成绩信息哦~" />
            </template>
            <el-table-column label="班级编号" align="center" key="classId" prop="classId" v-if="false"/>
            <el-table-column label="班级名" align="center" key="className" prop="className" :show-overflow-tooltip="true" />
            <el-table-column label="考试名称" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="学生姓名" align="center" key="nickname" prop="nickname" :show-overflow-tooltip="true" />
            <el-table-column label="学生成绩" align="center" key="scope" prop="scope" :show-overflow-tooltip="true" /> 
            <el-table-column label="考试开始时间" align="center" key="beginTime" prop="beginTime" :show-overflow-tooltip="true" />
         </el-table>
         <br/>
         <br/>
           <!-- 分页 -->
           <el-pagination
           style="margin-left: 0px;"       
           v-model:current-page="currentPage4"
           v-model:page-size="pageSize4"
           :page-sizes="[5, 10, 15, 20]"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           background
         />
</template>
<script setup>
import { ref } from "vue";
import { ElMessage, ElNotification } from 'element-plus'
import { teacher_class,getStudentExam, findClassByStage,downloadDay } from "@/api/teacher/class/teacher_class";
import { useUserStore1 } from '@/store/userStore.js';
const userInfo = useUserStore1().userInfo;

const queryRef = ref()
const loading =ref(true)    //页面全局加载
const showSearch = ref(true); //动态隐藏
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const importList = ref([]) //查询所有
const total = ref()
const Classcities = ref([]) //班级下拉框

//查询老师所带班级查询列表
getList()
function getList(){
   teacher_class(userInfo.userId).then(res=>{
    Classcities.value=res.data.obj
   })
}

//要查询的班级的参数
const queryParams = ref({
 pageNum:currentPage4.value,
 pageSize:pageSize4.value,
 teacherId:userInfo.userId,
 name:null,
 classId:'',
 beginTime:''
})

findStudentInfo()
//导出学生成绩信息查询
function findStudentInfo(){
loading.value=true
findClassByStage(queryParams.value).then(res=>{
    loading.value=false
  if(res.data.code == 200){
    importList.value=res.data.obj.list
    total.value = res.data.obj.total
    console.log(importList);
    
      importList.value.forEach(element => {
        if(element.beginTime != null){
            element.beginTime=caseTime(element.beginTime)
        }
    });
  }
})
}

//控制条数
const handleSizeChange = (val) => {
 queryParams.value.pageSize=val
 findStudentInfo()
}
//控制页数
const handleCurrentChange = (val) => {
 queryParams.value.pageNum=val
 findStudentInfo()
}

//导出方法
function handleExport(){
    downloadDay().then(res=>{
    const xlsx = "application/vnd.ms-excel";
    let blob = new Blob([res.data],{type:xlsx})
       const enlink = document.createElement('a')
       enlink.download='学生成绩.xlsx';
      enlink.style.display='none',
      enlink.href = URL.createObjectURL(blob)
       document.body.appendChild(enlink);
       enlink.click();
       URL.revokeObjectURL(enlink.href);
      document.body.removeChild(enlink)
    })
}

const props = defineProps({
/* 是否显示检索条件 */
showSearch: {
  type: Boolean,
  default: true,
},
/* 显隐列信息 */
columns: {
  type: Array,
},
/* 是否显示检索图标 */
search: {
  type: Boolean,
  default: true,
},
/* 显隐列类型（transfer穿梭框、checkbox复选框） */
showColumnsType: {
  type: String,
  default: "checkbox",
},
/* 右外边距 */
gutter: {
  type: Number,
  default: 10,
},
})
const emits = defineEmits(['update:showSearch', 'queryTable']);
// 搜索
function toggleSearch() {
if (showSearch.value == true) {
 showSearch.value = false
} else {
 showSearch.value = true
}
emits("update:showSearch", !props.showSearch);
}
// 刷新
function refresh() {
findStudentInfo()
}
findStudentInfo()

//动态查询重置
const resetQuery = (formEl) => {
if (!formEl) return
formEl.resetFields() 
findStudentInfo()
}

/**时间转换 */
function caseTime(date){
let time=new Date(date);
let year=time.getFullYear();
let month=time.getMonth()+1;
let day=time.getDate();
let hours=time.getHours();
let minutes=time.getMinutes();
if(month<=9){
    month='0'+month
}
if(day<=9){
   day='0'+day
}
if(hours<=9){
  hours='0'+hours
}
if(minutes<=9){
  minutes='0'+minutes
}
return year+"-"+month+"-"+day+" "+hours+":"+minutes;
}

</script>